<script setup lang="ts">
import Bar from "../../chart/Bar.vue";
import Pie from "../../chart/Pie.vue";
import Line from "../../chart/Line.vue";
import TypeIt from "@/components/ReTypeit";
import { useWindowSize } from "@vueuse/core";
import { ref, computed, onMounted, reactive, markRaw } from "vue";

defineOptions({
  name: "IpChartVert"
});

const list = ref();
const loading = ref<boolean>(true);
const titleClass = computed(() => {
  return ["text-base", "font-medium"];
});

// 监听窗口大小
const { height } = useWindowSize();

setTimeout(() => {
  loading.value = !loading.value;
}, 800);

// getReleases().then(({ data }) => {
//   list.value = data.list.map(v => {
//     return {
//       content: v.body,
//       timestamp: dayjs(v.published_at).format("YYYY/MM/DD hh:mm:ss A"),
//       icon: markRaw(
//         useRenderFlicker({
//           background: randomColor({ type: "hex" }) as string
//         })
//       )
//     };
//   });
// });

onMounted(() => {});
</script>

<template>
  <div>
    <!-- 分成多少份 -->
    <el-row :gutter="24">
      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <Line height="200px" />
          </template>
        </el-skeleton>
      </el-col>

      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <Pie height="200px" />
          </template>
        </el-skeleton>
      </el-col>

      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="24"
        :lg="8"
        :xl="8"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <Bar height="200px" />
          </template>
        </el-skeleton>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

:deep(.el-card__header) {
  padding: 5px 10px 5px;
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
